<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<script src="js/sweetalert.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet"/>

		<script language="javascript">
			mui.init();

			function IsDigit(cCheck) {
				return(('0' <= cCheck) && (cCheck <= '9'));
			}

			function IsAlpha(cCheck) {
				return((('a' <= cCheck) && (cCheck <= 'z')) || (('A' <= cCheck) && (cCheck <= 'Z')))
			}

			function IsValid() {
				var struserName = reg.username.value;
				for(nIndex = 0; nIndex < struserName.length; nIndex++) {
					cCheck = struserName.charAt(nIndex);
					if(!(IsDigit(cCheck) || IsAlpha(cCheck))) {
						return false;
					}
				}
				return true;
			}

			function docheck() {
				if(reg.username.value == "") {
					swal({
						title: "用户名为空!",
						text: "请输入用户名!",
						icon: "error",
						className: "sweetAlert"
					})
					return false;
				} else if(!IsValid()) {
					swal({
						title: "用户名错误!",
						text: "只能使用数字和字母!",
						icon: "error",
						className: "sweetAlert"
					})
					return false;
				} else if(reg.password.value == "") {
					swal({
						title: "密码为空!",
						text: "请输入密码!",
						icon: "error",
						className: "sweetAlert"
					})
					return false;
				} else if(reg.password.value != reg.rpwd.value) {
					swal({
						title: "密码不一致!",
						text: "请重新输入!",
						icon: "error",
						className: "sweetAlert"
					})
					return false;
				} else {
					return true;
				}
			}
		</script>

		<style type="text/css">
			#header {
				align-content: center;
				text-align: center;
				color: black;
				letter-spacing: 1.5px;
				font-size: 45px;
				font-family: "times new roman";
				font-style: italic;
				margin-bottom: 40px;
				background-color: transparent;
			}
			
			.account_pass {
				font-family: "微软雅黑";
				font-size: 20px;
				margin-left: ;
			}
			
			#button {
				text-align: center;
			}
			
			.mui-btn {
				width: 300px;
				height: 40px;
			}
			
			.mui-content {
				margin-top: 30px;
			}
			
			.mui-input-group {
				background-color: transparent;
				margin-top: 10px;
				/*border-bottom: hidden;*/
			}
			
			.mui-input-row {
				border-top-style: none;
				padding-left: 20px;
				padding-right: 30px;
			}
			
			.mui-icon {
				margin-top: 30px;
				font-size: 60px;
				padding-left: 50px;
				padding-right: 60px;
			}
			
			.mui-input-clear {}
		</style>
	</head>

	<body>
		<div style="solid #000000; width: 391px; height: 0px;margin: 0 auto;">
			<div class="mui-content">
				<div>
					<p align="center"><img src="img/head_picture.PNG"></img>
					</p>
					<p id="header">TennisWorld</p>
				</div>
				<div style=" width:100%;margin-left: 5%; margin-right: 5%;margin-top: 40px;">
				</div>
				<form class="mui-input-group" name="reg" action="reg.php" method="post" target="_self" onSubmit="return docheck()">
					<div class="mui-input-row">
						<label class="account_pass">账号</label>
						<input type="text" name="username" class="mui-input-clear" placeholder="手机号、用户名、邮箱">
					</div>

					<div class="mui-input-row">
						<label class="account_pass">密码</label>
						<input type="password" name="password" class="mui-input-clear" placeholder="请输入密码">
					</div>

					<div class="mui-input-row">
						<label class="account_pass">确认密码</label>
						<input type="password" name="rpwd" class="mui-input-clear" placeholder="请输入确认密码">
					</div>

					<div style=" width:100%;margin-left: 5%; margin-right: 1%;margin-top: 80px;"> </div>
					<div class="mui-content-padded" id="button">
						<button class="mui-btn  mui-btn-primary" type="submit" style="background-color:#0086B3;border:0;">注册</button>
					</div>
				</form>
				
				<div class="mui-content-padded" id="button">
					<button class="mui-btn  mui-btn-primary" onclick="window.location.href='login.html'" style="background-color:#0086B3;border:0;margin-top:25px;">登录</button>
				</div>
			</div>
		</div>
	</body>

</html>